<script setup lang="ts">
import router from "../Router";
import Footer from "../components/BusinessFooter.vue";
import {computed, ref} from "vue";
import {browseOrderLineItem, businessConfirm, businessRefund, businessWatchOrder, getPrice} from "../network/api.ts";

let username = ref()
username.value = sessionStorage.getItem("username")
let orderArr = ref()
businessWatchOrder(sessionStorage.getItem("userId")).then(res=>{
  orderArr.value = res.data
  for(let i =0;i< orderArr.value.length;i++){
    orderArr.value[i].totalPrice = ref(0)
    browseOrderLineItem(orderArr.value[i].id).then(res=>{
      orderArr.value[i].lineItems = res.data
      for(let j = 0;j<orderArr.value[i].lineItems.length;j++){
        getPrice(orderArr.value[i].lineItems[j].shopId,orderArr.value[i].lineItems[j].itemId).then(res=> {
          orderArr.value[i].lineItems[j].price = res.data
          orderArr.value[i].totalPrice += orderArr.value[i].lineItems[j].price*orderArr.value[i].lineItems[j].quantity
        })
      }
    })
  }


  console.log(orderArr.value)
})

function confirmOrder(index){
  businessConfirm(
      sessionStorage.getItem("userId"),
      orderArr.value[index].lineItems[0].shopId,
      orderArr.value[index].id
  ).then(res=>{
    console.log(res.data)
    orderArr.value[index].payStatus=3
  })
}

function refundOrder(index){
  businessRefund(
      sessionStorage.getItem("userId"),
      orderArr.value[index].lineItems[0].shopId,
      orderArr.value[index].id
  ).then(res=>{
    console.log(res.data)
    orderArr.value[index].payStatus=4
  })
}
</script>

<template>
  <header class="title flex justify-center items-center bg-blue border-blue-600 ">
    <div class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}}家</p>
      <h1>Orders</h1>
    </div>
  </header>

  <el-table :data="orderArr" height="570" style="width:100% "
            class="select-none"
  >
    <el-table-column type="expand" width="20" style="margin-right: 3vw; ">
      <template #default="props">
        <el-table :data="props.row.lineItems" style="width:100% ;" >
          <el-table-column type="expand" width="30" style="margin-left: 5vw; ">
            <template #default="props">
             <p class="ml-10vw">创建时间: {{props.row.createTime}}</p>
            </template>
          </el-table-column>
          <el-table-column  prop="itemName" label="item" width="100" align="center"/>
          <el-table-column  prop="shopName" label="shop" width="100" align="center"/>
          <el-table-column  prop="price" label="单价/元" width="100" align="center"/>
          <el-table-column  prop="quantity" label="已选数量" width="55" align="center"/>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column type="index" width="20"/>
    <el-table-column  prop="lineItems[0].shopName" label="shop" width="70" align="center"/>
    <el-table-column  prop="totalPrice" label="总价" width="65" align="center"/>
    <el-table-column  prop="payStatus" label="支付状态" width="55" align="center"/>
    <el-table-column label="操作"  width="170" align="center">
      <template #default="scope">
        <el-button type="primary" size="small"
                   @click="confirmOrder(scope.$index)"
                   :disabled="orderArr[scope.$index].payStatus!=1"
        >
          确认:3
        </el-button>
        <el-button type="info" size="small"
                   @click="refundOrder(scope.$index)"
                   :disabled="orderArr[scope.$index].payStatus!=1"
        >
          退款:4
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <Footer></Footer>



</template>

<style scoped>

</style>